<template>
	<view>
		
		<u-sticky style="background: linear-gradient(to right,#ff8763,#ff6364);top: 0px;">
			<view class="statbar">
			</view>
			<view class="top">
				<u-search bgColor="#FFFFFF" placeholder="" :disabled="true" :showAction="false"
					@click="toPage('pages/search/search')"></u-search>
				<u-icon style="padding-left: 20rpx;"  name="clock"  color="#FFFFFF"  size="28" @click="toPage('pages/history/history')">
				</u-icon>
				<!-- #ifdef APP-PLUS -->
				<u-icon name="chat"  color="#FFFFFF" size="34" @click="toPage('pages/notify/notify')"></u-icon>
				<view style="position: relative;left: -18px;top:7px">
					<u-badge v-if="msgNum>0" type="success" max="99" :value="msgNum"
						@click="toPage('pages/notify/notify')"></u-badge>
				</view>
				<!-- #endif -->
			</view>
			<view style="clear: both;"></view>
			<view>
				<u-tabs :list="labelList" @click="click" lineColor="#ffffff" :itemStyle="{
					fontSize: '20px',
					minWidth: '50px',
					height: '50px'
				}" :activeStyle="{
							color: '#ffffff',
							fontWeight: 'bold',
							transform: 'scale(1.05)'
						}" :inactiveStyle="{
							color: '#4a4a4a',
							transform: 'scale(1)'
						}"></u-tabs>
			</view>
		</u-sticky>
		

		<view v-if="isLocalRefresh">
			<vod-index :typeId="index"></vod-index>
		</view>
	</view>
</template>

<script>
	import index from '../../pages/index/index.vue';
	import {
		checkAndUpdate
	} from '../../config/util.js';
	import {
		getUnreadCount
	} from '../../config/api.js';

	export default {
		components: {
			'vod-index': index
		},
		data() {
			return {
				index: 0,
				msgNum: 0,
				isLocalRefresh: true,
				labelList: [{
					name: '推荐',
					typeId: '0',
					}],
				labelListB: [{
					name: '推荐',
					typeId: '0',
					},
					{
						name: '电影',
						typeId: '1',
					},
					{
						name: '电视剧',
						typeId: '2',
					},
					{
						name: '综艺',
						typeId: '3',
					},
					{
						name: '动漫',
						typeId: '4',
					}
				],
				carouselList: [],

			}
		},
		onLoad() {
			// #ifdef APP
			   checkAndUpdate(false);
			// #endif
			this.initNav();
			this.initMsgNum();
			uni.$on('msgNumAdd', userId => {
				getApp().globalData.msgNum = getApp().globalData.msgNum + 1;
				this.msgNum = getApp().globalData.msgNum;
			});
			uni.$on('msgNumReduce', userId => {
				if (this.msgNum > 0) {
					setTimeout(() => {
						getApp().globalData.msgNum = getApp().globalData.msgNum - 1;
						this.msgNum = getApp().globalData.msgNum;
					}, 300)
				}
			})
		},
		onShow() {
			this.msgNum = getApp().globalData.msgNum
		},
		methods: {
			initNav() {
				let navList = uni.getStorageSync('NavList')
				console.log(navList)
				if(navList && navList.length>0){
					this.labelList = this.labelList.concat(navList)
				}else{
					this.labelList = this.labelListB;
				}

			},
			initMsgNum() {
				if (!this.$store.state.token) {
					return
				}
				getUnreadCount().then((res) => {
					getApp().globalData.msgNum  = res
					this.msgNum = getApp().globalData.msgNum
					
				})
			},
			click(item) {
				this.isLocalRefresh = false
				setTimeout(() => {
					this.index = item.typeId;
					this.isLocalRefresh = true
				}, 100);

			},
			toPage(item) {
				uni.$u.route({
					url: item,
					params: {}
				})
			},

		},

	}
</script>
<style scoped>
	page {
		background-color: #e7e7e7,
	}
	.statbar {
		height: var(--status-bar-height);
		background: linear-gradient(to right, #ff8763, #ff6364);
	}

	.top {
		height: 45px;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		display: flex;
		align-items: center;
		/*垂直居中*/
		justify-content: center;
		/*水平居中*/

	}

	.u-icon {
		margin: 5px;
		display: inline-block;
	}

	.u-tabs {
		margin-bottom: 5px;
	}
</style>
